<template>
  <view class="gathering">
    <view class="topNavBox">
      <view class="topNav common-tab">
        <view class="navItem common-tab-text" :class="{active:i.tabNumIndex == tabNum,text:i.tabNumIndex == tabNum}" v-for="(i,index) in navList" :key = 'index' @click="handelTabItem(i.tabNumIndex)">{{i.item}}</view>
      </view>
      <view class="selectSearch">
         <!-- :class="{highlightBgc:highlightBgc1,grayBgc:grayBgc1}" -->
        <view class="timeSelect highlightBgc">
          <view class="middleTo highlightTxt">
            <picker mode="date" :value="start_date" :end="start_date" @change="beginDateChange">
              <view class="date">{{sendData.beginTime || '开始时间'}}</view>
            </picker>
          </view>
          <view class="middleTo highlightTxt">至</view>
          <view class="middleTo highlightTxt">
            <picker mode="date" :value="start_date" :start="sendData.beginTime" :end="start_date" @change="endDateChange">
              <view class="date">{{sendData.endTime || '结束时间'}}</view>
            </picker>
          </view>
        </view>
        <view class="hotNameSelect">
          <view class="uni-list-cell-db" @click="hotNameClick">
            <view class="">爆品名称</view>
          </view>
        </view>
      </view>
    </view>
    <view class="allTrace">
      <view class="allTraceTxt">共查出：{{gatheringFrom.count + '' || '-'}}张</view>
      <view class="allTraceTxt">结算金额：¥{{gatheringFrom.money + '' || '-'}}</view>
    </view>
    <view class="gatheringList" v-for="(item,index) in gatheringList" :key = 'index'>
      <view class="gatheringItem">
        <view class="gatheringItem-t">
          <view class="gatheringItem-t-r">券码：{{item.sn}}</view>
          <view class="gatheringItem-t-l" v-if="item.status == 1">{{item.statusName}}</view>
          <view class="gatheringItem-t-l" v-if="item.status == 0">{{item.statusName}}</view>
          <view class="gatheringItem-t-l" v-if="item.status == 2">{{item.statusName}}</view>
        </view>
        <view class="gatheringItem-b">
          <view class="gatheringItem-b-t">
            <view class="gatheringItem-b-t-l">
              <image style="width: 100rpx;height: 100rpx;border-radius:12rpx;" :src="item.imageUrl" mode=""></image>
              <view class="b-b-price">¥ {{item.productPrice}}</view>
            </view>
            <view class="gatheringItem-b-t-r">
              <view class="t-r-one">
                <view class="">{{item.userName}}</view>
                <view class="">{{item.userMobile}}</view>
              </view>
              <view class="txtcontent">{{item.productTitle}}</view>
              <!-- 已核销 -->
              <view class="" v-if="item.status == 1">验券时间:{{item.useTime}}</view> 
              <!-- 待核销 -->
              <view class="" v-if="item.status == 0">过期时间:{{item.effectEndTime}}</view>
              <!-- 已过期 -->
              <view class="" v-if="item.status == 2">过期时间:{{item.effectEndTime}}</view>
            </view>
          </view>
          <view class="gatheringItem-b-b">
            <!-- <view class="b-b-price">¥ {{item.productPrice}}</view> -->
            <view class="b-b-close">
              <!-- <text class="aaa"></text> -->
              <!-- <text>已结算:￥</text> -->
            </view>
          </view>
        </view>
      </view>
    </view>
    <uni-drawer :visible="hotVisible" mode='right' @close="hotVisible=false">
      <view class="hotDrawer">
        <view class="uni-title">爆品名称</view>
        <scroll-view :scroll-top="scrollTop" scroll-y="true" class="sceollHeight">
          <view class="hotNameList">
            <checkbox-group @change="checkboxChange">
              <view class="hotNameItem" v-for="(item,index) in hotNameList" :key = "index">
                <view class="hotNameItem-l">
                  <checkbox  style="transform:scale(0.7)" :value="item.id + ''" :checked="radioChcked"/>
                  <!-- <radio :value="item.id + ''" :checked="radioChcked" @tap="isAgree" /> -->
                </view>
                <view class="hotNameItem-r">
                  <view class="hotNameItem-r-l">
                    <image style="width: 100rpx; height: 100rpx;" :src="item.mainFileUrl" mode=""></image>
                  </view>
                  <view class="hotNameItem-r-r">{{item.title}}</view>
                </view>
              </view>
            </checkbox-group>
            <view class="hotNameNo" v-if="!hotNameList.length">暂无数据</view>
          </view>
        </scroll-view>
        <view class="uni-padding-wrap uni-common-mt">
          <button class="cancel" @click="cancel">取消</button>
          <button type="primary" class="affirm" @click="affirm">确定</button>
        </view> 
      </view>
    </uni-drawer>
    <view class="loading">
      <view class="loadingImg" v-if="gatheringList && gatheringList.length == 0">
        <image style="width: 340rpx; height: 340rpx;" :src="image" mode=""></image>
      </view>
      {{loadingText}}
    </view>
  </view>
</template>

<script>
import { findStorePage,ticketByStore,myHotProduct } from "@/service/chargeOff/chargeOff.service.js"
import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
export default {
  components: {uniDrawer},
  data () {
    const currentDate = this.getDate({
      format: true
    })
    return {
      tabNum: null, // tab索引 
      navList: [
        {tabNumIndex:null,item:'全部'},
        {tabNumIndex:'1',item:'已核销'},
        {tabNumIndex:'0',item:'待核销'},
        {tabNumIndex:'2',item:'已过期'}
      ],
      //爆品名称
      hotVisible:false, // 抽屉式显隐
      hotNameList: [],
      radioChcked:false, // radio 选择
      checkboxIds:'',
      scrollTop: 0,
      productIndex:-1,
      // statusList: [[{title: '爆品名称',id: -1}]],
      gatheringFrom: {
        count:'',
        money:''
      },
      loadingText: '加载中...',
      image: this.$store.state.imgBaseUrl + '/notShop.png',
      loadingFlag: false,
      gatheringList: [],
      sendData: {
        beginTime:'',
        endTime:'',
        status:'',
        productIds:'', // 爆品Id
        size:10,
        current:1
      },
      start_date: currentDate, // 当前时间
      // highlightBgc1:false,
      // grayBgc1:true
    }
  },
  onLoad (option) {
    console.log(option)
    let beginTime = option.beginDate;
    let endTime = option.endDate;
    this.tabNum = Number(option.tabNumIndex)
    this.getNowMonthDate(beginTime,endTime);
  },
  onShow () {
  },
  onReachBottom () {
    let _self = this;
    // 页面滚动到底部的事件
    _self.getMoreDatas();
  },
  methods: {
    //获取本月
    getNowMonthDate(beginTime,endTime,tabNum) {
      let date = new Date();
      let year = date.getFullYear() + "";
      let month = (date.getMonth() + 1) + "";
      // // 本月第一天日期
      let begin = year + "-" + month + "-01";
      // // 本月最后一天日期    
      // let lastDateOfCurrentMonth = new Date(year,month,0);
      // let end = year + "-" + month + "-" + lastDateOfCurrentMonth.getDate();
      if (beginTime && endTime) {
        this.sendData.beginTime = beginTime;
        this.sendData.endTime = endTime;
        this.getTicketByStore(this.tabNum);
        this.getDatas(this.tabNum);
      } else {
        this.sendData.beginTime = begin;
        this.sendData.endTime = this.start_date;
        this.getTicketByStore();
        this.getDatas();
      }
    },
    // 选择日期
    beginDateChange (e) {
      this.sendData.beginTime = e.target.value;
      this.getTicketByStore(this.tabNum);
      this.getDatas(this.tabNum);
    },
    endDateChange (e) {
      this.sendData.endTime = e.target.value;
      this.getTicketByStore(this.tabNum);
      this.getDatas(this.tabNum);
    },
    // 获取当前时间
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
    
      if (type === 'start') {
        year = year - 60;
      } else if (type === 'end') {
        year = year + 2;
      }
      month = month > 9 ? month : '0' + month;;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day}`;
    },
    // 获取爆品名称
    gitHotName () {
      myHotProduct({},res => {
        if (res.status == 0) {
          this.hotNameList = res.data && res.data.length > 0 ? res.data : [];
        }
      })
    },
    checkboxChange (e) { 
      this.checkboxIds = e.detail.value.join(); //得到多选id
    },
    hotNameClick () { // 点击爆品名称抽屉为true
      this.hotVisible = true;
      this.gitHotName(); //爆品名称
    },
    cancel () { // 抽屉-取消
      this.hotVisible = false;
    },
    affirm () { // 抽屉-确认
      this.sendData.productIds = this.checkboxIds;
      this.hotVisible = false;
      this.getTicketByStore(this.tabNum);
      this.getDatas(this.tabNum);
    },
    // 获取  核销码数量及金额统计
    getTicketByStore (tabNumIndex) {
      let params = {
        status:tabNumIndex,
        id: this.sendData.productIds,
        beginTime:this.sendData.beginTime,
        endTime:this.sendData.endTime
      };
      
      ticketByStore(params,res => {
        if (res.status == 0) {
          this.gatheringFrom = res.data;
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    },
    getMoreDatas () {
      if(!this.loadingFlag){
        return false;
      };
      this.sendData.current++;
      this.getDatas(this.tabNum);
    },
    getDatas (tabNumIndex) {
      this.loadingText = '加载中...';
      uni.showNavigationBarLoading(); // 在当前页面显示导航条加载动画
      this.sendData.status = tabNumIndex;
      findStorePage(this.sendData,res => {
        if(res.status == 0) {
          if(res.data.records.length == 0 && this.gatheringList.length == 0) {
            this.loadingFlag = false;
            uni.hideNavigationBarLoading();
            this.loadingText = '暂无数据';
            return false;
          }
          if (this.sendData.current == 1) {
            this.gatheringList = res.data.records && res.data.records.length > 0 ? res.data.records : [];
          } else {
            this.gatheringList = this.gatheringList.concat(res.data.records);
          }
          uni.hideNavigationBarLoading();
          uni.stopPullDownRefresh();
          if (this.gatheringList.length == res.data.total) {
            this.loadingFlag = false;
            this.loadingText = '已加载全部'
          } else {
            this.loadingFlag = true;
            this.loadingText = '加载更多'
          }
        } else {
          this.loadingText = '暂无数据';
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    },
    handelTabItem (tabNumIndex) { //点击切换tab
      this.sendData.current = 1;
      this.tabNum = tabNumIndex;
      this.sendData.status = tabNumIndex;
      this.getDatas(tabNumIndex);
      this.getTicketByStore(tabNumIndex)
    }
  }
}
</script>

<style lang="scss" scoped>
  .gathering {
    // 顶部导航栏
		.topNavBox {
			background-color: #FFFFFF;
			padding-bottom: 40rpx;
			.topNav {
				height: 88rpx;
				line-height: 88rpx;
				.common-tab {
					&-text {
						&.active {
							&:after {
								top: 52rpx;
							}
						}
					}
				}
				.navItem　{
					margin: auto;
					text-align: center;
					font-size:30rpx;
				} 
			}
			.selectSearch {
				padding-left: 32rpx;
				.timeSelect {
          display: inline-block;
					vertical-align: middle;
          opacity: 0.5;
					border-radius:25rpx;
					line-height: 50rpx;
					.middleTo {
						display: inline-block;
						margin: 0 30rpx;
						font-size:24rpx;
						font-weight:500;
					}
				}
			}
			.hotNameSelect {
				display: inline-block;
				padding: 0 20rpx;
				margin-left: 20rpx;
				height:50rpx;
        background-color: #F0F0F0;
				vertical-align: middle;
				border-radius:25rpx;
				.uni-list-cell-db {
					line-height: 50rpx;
					font-size:24rpx;
					font-weight:500;
					color:rgba(153,153,153,1);
				}
			}
      .grayBgc {
        background-color: #F0F0F0;
      }
      .grayTxt {
        color:rgba(153,153,153,1);
      }
      .highlightBgc {
        background:rgba(255,116,115,0.3);
      }
      .highlightTxt {
        color:rgba(255,116,115,1);
      }
		}
		.allTrace {
			display: flex;
			justify-content: space-between;
			padding: 14rpx 35rpx;
			.allTraceTxt {
				font-size:22rpx;
				font-weight:500;
				color:rgba(51,51,51,1);
			}
		}
		// 券列表
		.gatheringList {
			.gatheringItem {
				margin: 0 32rpx 22rpx 32rpx;
				background:rgba(255,255,255,1);
				box-shadow:0rpx 0rpx 27rpx 0rpx rgba(237,237,237,1);
				border-radius:12rpx;
				.gatheringItem-t {
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid rgba(225,225,225,1);
					margin-left: 27rpx;
					padding-right: 24rpx;
					.gatheringItem-t-r {
						line-height: 64rpx;
						font-size:24rpx;
						font-family:PingFang SC;
						font-weight:500;
						color:rgba(51,51,51,1);
					}
					.gatheringItem-t-l {
						line-height: 64rpx;
						font-size:28rpx;
						font-family:PingFang SC;
						font-weight:500;
						color:rgba(194,172,120,1);
					}
				}
				.gatheringItem-b {
					margin-left: 30rpx;
					padding: 10rpx 20rpx 20rpx 0;
					.gatheringItem-b-t {
            display: flex;
            align-items: center;
						.gatheringItem-b-t-l {
              .b-b-price {
                width:90rpx;
                height:30rpx;
                background:rgba(194,172,120,1);
                border-radius:6rpx;
                text-align: center;
                margin: auto;
                font-size:22rpx;
                color:rgba(255,255,255,1);
              }
						}
						.gatheringItem-b-t-r {
							margin-left: 17rpx;
							display: inline-block;
							font-size:22rpx;
							color:rgba(153,153,153,1);
              width: 80%;
							.t-r-one {
								display: flex;
								justify-content: space-between;
							}
              .txtcontent {
                margin-bottom: 10rpx;
                margin-top: 10rpx;
              }
						}
					}
					.gatheringItem-b-b {
						display: flex;
						justify-content: space-between;
						.b-b-close {
							.aaa {
								display: block;
								width:70rpx;
								height:1px;
								background:rgba(51,51,51,1);
							}
							font-size:22rpx;
							color:rgba(51,51,51,1);
						}
					}
				}
			}
		}
    .hotDrawer {
      .uni-title {
        padding: 50rpx 38rpx;
        font-size:36rpx;
        font-weight:bold;
        color:rgba(67,67,67,1);
      }
      .sceollHeight {
        height: calc(100vh - 150px);
      }
      .hotNameList {
        .hotNameItem {
          display: flex;
          justify-content: end;
          .hotNameItem-l {
            line-height: 130rpx;
            margin: 0 26rpx;  
          }
          .hotNameItem-r {
            padding-top: 20rpx;
            padding-right: 12rpx;
            width: 100%;
            border-bottom: 1px solid rgba(225,225,225,1);
            display: flex;
            align-items: center;
            .hotNameItem-r-l {
              display: inline-block;
            }
            .hotNameItem-r-r {
              display: inline-block;
              vertical-align: top;
              line-height: 40rpx;
              margin-top: 5px;
              margin-left: 12rpx;
              font-size:24rpx;
              font-weight:500;
              color:rgba(67,67,67,1);
            }
          }
        }
        .hotNameNo {
          text-align: center;
          font-size:30rpx;
          font-weight:500;
          color:rgba(102,102,102,1);
        }
      }
      /* 下面的button按钮 */
      .uni-common-mt button {
        width: 237rpx;
        height: 70rpx;
        font-size:30rpx;
        font-weight: 500;
        display: inline-block;
        margin:21rpx 10rpx;
      }
      .cancel {
        border: none;
        background:rgba(225,225,225,1);
        color: #FFFFFF;
      }
      .affirm {
        background: #434343;
        color: rgba(246, 218, 153, 1);
      }
      .uni-common-mt{
        width: 100%;
        position:fixed;
        height: 112rpx;
        text-align: center;
        bottom: 0;
        background-color: #FFFFFF;
        border-top:2rpx solid #E1E1E1;
        uni-button:after {
          border: none;
        }
      }
    }
    .loading {
      text-align: center;
      font-size: 26rpx;
      color: #999999;
      .loadingImg {
        margin-top: 200rpx;
      }
    }
  }
</style>
